<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title" style="padding-block: 10px">学生管理</h3>


<!--                    <div class="input-group input-group-sm" style="width: 100px;">-->
<!--                        <div class="input-group-btn">-->
<!--                            <button type="button" class="btn btn-default btn-add">添加</button>-->
<!--                            <button type="button" class="btn btn-default btn-update">修改</button>-->
<!--                            -->
<!--                        </div>-->


<!--                        <div>-->
<!--                            <table class="table">-->
<!--                                <thead>-->
<!--                                 <tr>-->
<!--                                    <th>序号</th>-->
<!--                                    <th>姓名</th>-->
<!--                                    <th>邮箱</th>-->
<!--                                    <th>角色</th>-->
<!--                                    <th>产品类别</th>-->
<!--                                    <th>手机号码</th>-->
<!--                                    <th>毕业院校</th>-->
<!--                                    <th>学历</th>-->
<!--                                    <th>备注</th>-->
<!--                                 </tr>-->

<!--                                </thead>-->
<!--                            </table>-->
<!--                            <tbody>-->
<!--                            -->
<!--                            </tbody>-->
<!--                           -->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="input-group-btn">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="username">名字</label>
                                <input type="text" class="form-control" id="username" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                            </div>
                            <div class="form-group">
                                <label for="type">类别</label>
                                <input type="text" class="form-control" id="type" placeholder="请输入产品类别">
                            </div>
                            <button type="button"  class="btn btn-primary" onclick="doFindSelect()">
                                <span class="glyphicon glyphicon-zoom-in"  aria-hidden="true"></span>搜索
                            </button>

                            <button type="button"  class="btn btn-success" onclick="reset()">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true" ></span>重置
                            </button>

                            <button type="button" class="btn btn-info" style="float: right">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                            </button>
                            <button type="button" class="btn btn-warning" style="float: right">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table id="gridTreeTable" class="table table-hover">
                    <thead>
                    <tr>
<!--                        <th data-field="selectItem" data-checkbox="true"></th>-->
                        <th>序号</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>产品类别</th>
                        <th>手机号码</th>
                        <th>毕业院校</th>
                        <th>学历</th>
                        <th>备注</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
<!--                    <tr v-for="(n,i) in student" :key="i">-->
<!--                        <td>{{i+1}}</td>-->
<!--                        <td>{{n.name}}</td>-->
<!--                        <td>{{n.email}}</td>-->
<!--                        <td>{{n.user}}</td>-->
<!--                        <td>{{n.phone}}</td>-->
<!--                        <td>{{n.academy}}</td>-->
<!--                        <td>{{n.education}}</td>-->
<!--                        <td>{{n.remark}}</td>-->
<!--&lt;!&ndash;                        <td><button class="btn btn-success" @click="doFindById(n)" style="color: blue">修改</button>&ndash;&gt;-->
<!--&lt;!&ndash;                            <button class="btn btn-danger" @click="deleteById(n.id)">删除</button>&ndash;&gt;-->
<!--&lt;!&ndash;                        </td>&ndash;&gt;-->
<!--                    </tr>-->
                    </tbody>
                </table>

                <div id="pageId" class="box-footer clearfix"/>

            </div>
        </div>
        <!-- /.box -->
    </div>
</div>

<script>

   // import ur from "../../bower_components/moment/src/locale/ur";

    $(document).ready(function () {
        $(".input-group-btn")
        .on("click",".btn-info,.btn-warning",doLoadEditUI);
    });



    $(function(){//页面加载完成执行
        $("#pageId").load("/modules/common/page.html",doGetObjects);

        //查询列表数据
       // doGetObjects();
    });

    function doLoadEditUI() {
        let  editUrl = "/modules/sys/student_edit.html";
        if ($(this).hasClass("btn-info")){
            console.log("我跳转了")
            $("#mainContentId").load(editUrl,()=>$(".box-title").html("添加用户"))
        }else if ($(this).hasClass("btn-warning")){
            let id = doGetCheckedId();
            if (!id){
                alert("请先选择要修改的数据")
                return;
            }
            let findByIdUrl = `http://localhost/student/${id}`;
            $.ajax({
                url:findByIdUrl,
                crossDomain: true,
                xhrFields: {withCredentials: true},
                success(result) {
                    if (result.state==1){
                        $("#mainContentId").data("rowData",result.data);
                        $("#mainContentId").load(editUrl,()=>$(".box-title").html("修改用户"))
                    }else {
                        alert(result.message);
                    }
                }
            });
        }
    }

    function doGetCheckedId() {
        return $("tbody input[name='radioId']:checked").val();
    }


    //重置按钮,清空输入框的值
    function reset() {
        debugger
       $("#username").val("");
       $("#email").val("");
       $("#type").val("");
    }

    //处理查询按钮事件
    function doQueryObjects(){
        $("#pageId").data("pageCurrent",1);
        doGetObjects();
    }

    //点击搜索函数
    function doFindSelect() {
       // this.username = $("#username").val;
        console.log($("#username").val())

        doGetObjects();

    }

    //拿出数据库中的所有学生纪录
    function  doGetObjects(){
        console.log("id=",$("tbody input[name='radioId']:checked").val())
        let pageCurrent=$("#pageId").data("pageCurrent");
        if(!pageCurrent)pageCurrent=1;
        console.log("user",$("#username").val())
        let params={"pageCurrent":pageCurrent,"name":$("#username").val(),"email":$("#email").val(),"types":$("type").val()};

        let url = 'http://localhost/student/'
        $.ajax({
            method:"GET",
            url:url,
            data:params,
            //data:JSON.stringify(params),
            crossDomain:true,
            xhrFields:{withCredentials: true},
            success(result){
                //查询完,将数据(结果集)进行处理
                doHandleQueryResponseResult(result);
            }
        });
    }
    //判断查询是否成功
    function doHandleQueryResponseResult(result) {
        if (result.state==1){
            //查询成功执行
            doSetTableBodyRows(result.data.list);
            doSetPagination(result.data);
        }else{
            alert(result.message);
        }
    }

    //设置tbody中列表数据
    function doSetTableBodyRows(data) {
        let tBody=$("#tbodyId");
        //清空列表
        tBody.empty();
        var i=0;
        //迭代data内容将数据最加到tbody中
        data.forEach(item=>{


            //判断type输入框的值是否为空
            if ($("#type").val()){
                //i用于纪录行数
                i++;
                //遍历types这个list集合
                item.types.forEach(type=>{
                    //做一个开关,判断是否有包含的
                    let j=0;
                    //
                    if(!type.indexOf($("#type").val())){
                        j++
                        // console.log(item.types)
                        // console.log("type=",$("#type").val())
                    }
                    //对有包含type输入框里相同的字符的数据呈现到页面
                    if (j!=0){
                        let  tr=$("<tr></tr>");
                        tr.data("rowData",item);
                        let tds=doCreateTds(item,i);
                        tr.append(tds);
                        tBody.append(tr);
                    }
                })

            }else {

                i++;
                let  tr=$("<tr></tr>");
                tr.data("rowData",item);
                let tds=doCreateTds(item,i);
                tr.append(tds);
                tBody.append(tr);
            }


        });
    }
    //创建tr
    function doCreateTds(row,i) {
        return `<td>${i}</td>
                <td>${row.name}</td>
                <td>${row.email}</td>
                <td>${row.user}</td>
                <td>${row.types}</td>
                <td>${row.phone}</td>
                <td>${row.academy}</td>
                <td>${row.education}</td>
                <td>${row.remark}</td>
                <td><input type='radio' name='radioId' value='${row.id}'></td>`


    }
</script>
